<template>
  <div style="width: 1100px;margin: 0 auto">
    <el-container>
      <!--  头部    -->
      <el-header style="height: 150px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-row>
              <el-col :span="24" class="align-left">
                <el-image src="images/lol/lol.webp" alt="英雄联盟" style="display: inline-block; width: 48px; height: 48px;padding-top: 10px; vertical-align: middle;"></el-image>
                <p style="display: inline-block; font-size: 24px; margin-left: 20px; vertical-align: middle;">英雄聯盟</p>
              </el-col>
              <el-col :span="24">
                <el-button-group style="margin-top: 10px;">
                  <el-button class="align-left" style="margin-right: 10px;">回單王</el-button>
                  <el-button class="align-left" style="margin-right: 10px;">上分必備</el-button>
                  <el-button class="align-left" style="margin-right: 10px;">優質新人</el-button>
                  <el-button class="align-left" style="margin-right: 10px;">本照認證</el-button>
                  <el-button class="align-left">7分鐘嚐鮮</el-button>
                </el-button-group>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="24">
                <div style="text-align: right;padding-top: 20px">
                  <el-button style="border-radius: 20px;">全部技能</el-button>
                </div>
              </el-col>
              <!--筛选选择器-->
              <el-col :span="24" style="text-align: right;padding-top: 30px">
                <template>
                  <el-select v-model="value1"  placeholder="智能排序" style="width: 150px;margin-right: 10px">
                    <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                 <!--陪玩条件筛选选择器-->
                  <el-select v-model="selected" multiple clearable placeholder="更多篩選" style="width: 150px">
                    <el-option-group label="性别">
                      <el-option label="只看女生" value="female"></el-option>
                      <el-option label="只看男生" value="male"></el-option>
                    </el-option-group>
                    <el-option-group label="标签">
                      <el-option label="回单王" value="回单王"></el-option>
                      <el-option label="本照认证" value="本照认证"></el-option>
                      <el-option label="夯口碑" value="夯口碑"></el-option>
                      <el-option label="高人气" value="高人气"></el-option>
                      <el-option label="优质新人" value="优质新人"></el-option>
                      <el-option label="7分钟嚐鲜" value="7分钟嚐鲜"></el-option>
                    </el-option-group>
                    <el-option-group label="段位">
                      <el-option label="永恒传说" value="永恒传说"></el-option>
                      <el-option label="战场传说" value="战场传说"></el-option>
                      <el-option label="星耀" value="星耀"></el-option>
                      <el-option label="钻石" value="钻石"></el-option>
                      <el-option label="铂金" value="铂金"></el-option>
                    </el-option-group>
                    <el-option-group label="擅长位置">
                      <el-option label="上单" value="上单"></el-option>
                      <el-option label="打野" value="打野"></el-option>
                      <el-option label="中单" value="中单"></el-option>
                      <el-option label="ADC" value="ADC"></el-option>
                      <el-option label="輔" value="輔"></el-option>
                    </el-option-group>
                    <el-option-group label="价格">
                      <el-option label="1~50" value="1-50"></el-option>
                      <el-option label="51~100" value="51-100"></el-option>
                      <el-option label="100~200" value="100-200"></el-option>
                      <el-option label="200以上" value="200以上"></el-option>
                    </el-option-group>
                  </el-select>
                </template>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
      <!--  主体部分    -->
      <el-main>
        <el-col v-for="(e, index) in partnerArr" :key="index">
              <el-row style="overflow: hidden;margin: 0 -10px;padding-top: 15px">
                <!--      第一个陪玩       -->
                <div style="width: 20%;float: left">
                  <div style="margin: 0 10px">
                    <el-card :body-style="{ padding: '0px' }">
                    <div style="border-radius: 10px;overflow: hidden;position: relative">
                      <div style="position:absolute;bottom: 10px;left: 5px;">
                        <VoiceComponent :audioUrl="voiceContent[2].audioUrl" />
                      </div>
                      <img class="img" :src="e.partnerImg1" width="100%" height="100%"
                           style="border-radius: 10px">
                    </div>
                    <div style="margin-top: 10px">
                      <div style="font-weight: 500;font-size: 14px;margin-left: 5px">{{ e.partnerNickName1 }}</div>
                      <div style="font-size: 10px;margin: 5px 0 0 5px">{{ e.star1 }}</div>
                      <div style="margin-top: 10px;color: #d87901;font-size: 12px;margin-left: 5px;margin-bottom: 10px;position: relative">券後價<b style="font-size: 18px">{{ e.price1 }}</b>幣
                        <div style="color: #8c94aa;position: absolute;left: 90px;bottom: 2px;text-decoration: line-through">{{e.prePrice1}}幣/局</div>
                      </div>
                    </div>
                    </el-card>
                  </div>
                </div>
                <!--      第二个陪玩       -->
                <div style="width: 20%;float: left">
                  <div style="margin: 0 10px">
                    <el-card :body-style="{ padding: '0px' }">
                    <div style="border-radius: 10px;overflow: hidden;position: relative">
                      <div style="position:absolute;bottom: 10px;left: 5px;">
                        <VoiceComponent :audioUrl="voiceContent[1].audioUrl"/>
                      </div>
                      <img class="img" :src="e.partnerImg2" width="100%" height="100%"
                           style="border-radius: 10px">
                    </div>
                    <div style="margin-top: 10px">
                        <div style="font-weight: 500;font-size: 14px;margin-left: 5px">{{ e.partnerNickName2 }}</div>
                        <div style="font-size: 10px;margin: 5px 0 0 5px">{{ e.star2 }}</div>
                      <div style="margin-top: 10px;color: #d87901;font-size: 12px;margin-left: 5px;margin-bottom: 10px;position: relative">券後價<b style="font-size: 18px">{{ e.price2 }}</b>幣
                        <div style="color: #8c94aa;position: absolute;left: 90px;bottom: 2px;text-decoration: line-through">{{e.prePrice2}}幣/局</div>
                      </div>
                    </div>
                    </el-card>
                  </div>
                </div>
                <!--      第三个陪玩       -->
                <div style="width: 20%;float: left">
                  <div style="margin: 0 10px">
                    <el-card :body-style="{ padding: '0px' }">
                    <div style="border-radius: 10px;overflow: hidden;position: relative">
                      <div style="position:absolute;bottom: 10px;left: 5px;">
                        <VoiceComponent :audioUrl="voiceContent[1].audioUrl"/>
                      </div>
                      <img class="img" :src="e.partnerImg3" width="100%" height="100%"
                           style="border-radius: 10px">
                    </div>
                    <div style="margin-top: 10px">
                        <div style="font-weight: 500;font-size: 14px;margin-left: 5px">{{ e.partnerNickName3 }}</div>
                        <div style="font-size: 10px;margin: 5px 0 0 5px">{{ e.star3 }}</div>
                      <div style="margin-top: 10px;color: #d87901;font-size: 12px;margin-left: 5px;margin-bottom: 10px;position: relative">券後價<b style="font-size: 18px">{{ e.price3 }}</b>幣
                        <div style="color: #8c94aa;position: absolute;left: 90px;bottom: 2px;text-decoration: line-through">{{e.prePrice3}}幣/局</div>
                      </div>
                    </div>
                    </el-card>
                  </div>
                </div>
                <!--      第四个陪玩       -->
                <div style="width: 20%;float: left">
                  <div style="margin: 0 10px">
                    <el-card :body-style="{ padding: '0px' }">
                    <div style="border-radius: 10px;overflow: hidden;position: relative">
                      <div style="position:absolute;bottom: 10px;left: 5px;">
                        <VoiceComponent :audioUrl="voiceContent[2].audioUrl"/>
                      </div>
                      <img class="img" :src="e.partnerImg4" width="100%" height="100%"
                           style="border-radius: 10px">
                    </div>
                    <div style="margin-top: 10px">
                        <div style="font-weight: 500;font-size: 14px;margin-left: 5px">{{ e.partnerNickName4 }}</div>
                        <div style="font-size: 10px;margin: 5px 0 0 5px">{{ e.star4 }}</div>
                      <div style="margin-top: 10px;color: #d87901;font-size: 12px;margin-left: 5px;margin-bottom: 10px;position: relative">券後價<b style="font-size: 18px">{{ e.price4 }}</b>幣
                        <div style="color: #8c94aa;position: absolute;left: 90px;bottom: 2px;text-decoration: line-through">{{e.prePrice4}}幣/局</div>
                      </div>
                    </div>
                    </el-card>
                  </div>
                </div>
                <!--      第五个陪玩       -->
                <div style="width: 20%;float: left">
                  <div style="margin: 0 10px">
                    <el-card :body-style="{ padding: '0px' }">
                    <div style="border-radius: 10px;overflow: hidden;position: relative">
                      <div style="position:absolute;bottom: 10px;left: 5px;">
                        <VoiceComponent :audioUrl="voiceContent[1].audioUrl"/>
                      </div>
                      <img class="img" :src="e.partnerImg5" width="100%" height="100%"
                           style="border-radius: 10px">
                    </div>
                    <div style="margin-top: 10px">
                        <div style="font-weight: 500;font-size: 14px;margin-left: 5px">{{ e.partnerNickName5 }}</div>
                        <div style="font-size: 10px;margin: 5px 0 0 5px">{{ e.star5 }}</div>
                        <div style="margin-top: 10px;color: #d87901;font-size: 12px;margin-left: 5px;margin-bottom: 10px;position: relative">券後價<b style="font-size: 18px">{{ e.price5 }}</b>幣
                          <div style="color: #8c94aa;position: absolute;left: 90px;bottom: 2px;text-decoration: line-through">{{e.prePrice5}}幣/局</div>
                        </div>
                    </div>
                    </el-card>
                  </div>
                </div>
              </el-row>
        </el-col>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import VoiceComponent from "./VoiceComponent.vue";
export default {
  name: "LolView",
  components: {
    VoiceComponent, // 注册 VoiceComponent 组件
  },
  data() {
    return {
      options1: [{
        value: '选项1',
        label: '智能排序'
      }, {
        value: '选项2',
        label: '人氣優先'
      }, {
        value: '选项3',
        label: '新人優先'
      }, {
        value: '选项4',
        label: '低價優先'
      }, {
        value: '选项5',
        label: '高價優先'
      }],
      value1: '',
      value2: '',
      partnerArr: [
        {
          partnerImg1: "images/lol/play1.webp",
          partnerNickName1: "書涵真的很暈🥀",
          star1: "⭐⭐⭐⭐⭐",
          price1: "180",
          prePrice1:"200",
          partnerImg2: "images/lol/play2.webp",
          partnerNickName2: "薔薇🐇",
          star2: "⭐⭐⭐⭐⭐",
          price2:"130",
          prePrice2:"150",
          partnerImg3: "images/lol/play3.webp",
          partnerNickName3: "萌❤️吃土了救救我🥹",
          star3: "⭐⭐⭐⭐⭐",
          price3: "130",
          prePrice3:"150",
          partnerImg4: "images/lol/play4.webp",
          partnerNickName4: "紅茶妹♡找我玩呀✨",
          star4: "⭐⭐⭐⭐⭐",
          price4: "180",
          prePrice4:"200",
          partnerImg5: "images/lol/play5.png",
          partnerNickName5: "小莓✿",
          star5: "⭐⭐⭐⭐⭐",
          price5: "180",
          prePrice5:"200"
        },
        {
          partnerImg1: "images/lol/play6.webp",
          partnerNickName1: "Luna💛🌙",
          star1: "⭐⭐⭐⭐⭐",
          price1: "150",
          prePrice1:"170",
          partnerImg2: "images/lol/play7.webp",
          partnerNickName2: "酒咪🤍下單私",
          star2: "⭐⭐⭐⭐",
          price2: "230",
          prePrice2:"250",
          partnerImg3: "images/lol/play8.webp",
          partnerNickName3: "Hebe🐸",
          star3: "⭐⭐⭐⭐⭐",
          price3: "130",
          prePrice3:"150",
          partnerImg4: "images/lol/play9.webp",
          partnerNickName4: "Yuni ꔛꕤ",
          star4: "⭐⭐⭐⭐⭐",
          price4: "180",
          prePrice4:"200",
          partnerImg5: "images/lol/play10.webp",
          partnerNickName5: "LAteaღ",
          star5: "⭐⭐⭐⭐⭐",
          price5: "110",
          prePrice5:"130"
        },
      ],
      voiceContent: [
        { id: "1", audioUrl: "images/lol/audio1.mp3" },
        { id: "2", audioUrl: "images/lol/audio2.mp3" },
        { id: "3", audioUrl: "images/lol/audio3.mp3" },
        { id: "4", audioUrl: "images/lol/playaudio.mp3" },
      ],
    }
  },
  methods: {
    selectOption(option) {
      // 处理选项点击事件，可以在这里根据需要进行相应的操作
      this.value = option.value; // 将选择结果赋值给变量 value
    }
  }

}
</script>

<style scoped>
.align-left {
  text-align: left;
}
.img {
  transition-duration: 1s; /*设置图片的持续时间*/
}

.img:hover {
  transform: scale(1.2); /*图片缩放1.2倍*/
}

</style>